<template>
  <div class="pd-30">
      <div class="flex">
          <div class=" center">
              <p>学生名：</p>
              <el-input class="w-230" v-model="input" placeholder="请输入"></el-input>
          </div>
          <div class=" center">
              <p>课时：</p>
              <el-input class="w-230" v-model="input" placeholder="请输入"></el-input>
          </div>
          <!-- <div class=" center">
              <p>手机号：</p>
              <el-input class="w-230" v-model="input" placeholder="请输入手机号"></el-input>
          </div> -->
          <div class=" center">
              <p>全部：</p>
              <el-select class="w-230" v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
              </el-select>
          </div>
      </div>
      <div class="flex mt-10">
          <div class="flex">
              <!-- <div class=" center">
                  <p class="mr-15">区域：</p>
                  <el-select class="w-280" v-model="value1" placeholder="请选择">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </div> -->
              <!-- <el-input v-if="value1 != 1" class="w-280 ml-194" v-model="input"
                  :placeholder="`请输入${options1[value1 - 1].label}名称`"></el-input> -->
          </div>
          <div class="flex">
              <el-button class="w-100">重置</el-button>
              <div class="w-30"></div>
              <el-button class="w-100" type="primary" plain>搜索</el-button>
              <div class="w-30"></div>
              <!-- <el-button class="w-100" type="primary" @click="addUser">添加</el-button> -->
          </div>
      </div>
      <div class="h-30"></div>
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号">
          </el-table-column>
          <!-- <el-table-column prop="name" label="学科">
          </el-table-column> -->
          <el-table-column prop="keShiAll" label="课时">
          </el-table-column>
          <el-table-column prop="keShiJiaoFU" label="消耗课时">
          </el-table-column>
          <el-table-column prop="shouYi" label="收益费用">
          </el-table-column>
          <el-table-column prop="grade" label="年级">
          </el-table-column>
          <el-table-column prop="jiaoFuZhongXinName" label="分配交付中心">
          </el-table-column>
          <!-- <el-table-column prop="mail" label="下属合伙人额度">
          </el-table-column>
          <el-table-column prop="mail" label="下属合伙人">
          </el-table-column> -->
          <!-- <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                  <p v-if="row.status == 1">正常</p>
                  <p class="red" v-else>禁用</p>
              </template>
          </el-table-column> -->
          <el-table-column prop="submitTime" label="创建时间">
          </el-table-column>
          <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                  <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                  <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->

              </template>
          </el-table-column>
      </el-table>
      <div class="flex mt-20">
          <div></div>
          <el-pagination :current-page="page" background layout="prev, pager, next" :total="total">
          </el-pagination>
      </div>


      <el-dialog :visible.sync="show" width="30%" :show-close="false">
          <span slot="title" class="dialog-footer">
              <h4 class="text-center">新增服务商</h4>
          </span>
          <!-- style="overflow-y: scroll;" -->
          <div class="plr-30">  
              <div class="flex_l">
                  <div class="w-100">年级：</div>
                  <el-input class="w-350 ml-20" v-model="form.grade" placeholder="请输入"></el-input>
              </div>
              <div class="flex_l mt-20">
                  <div class="w-100">手机号：</div>
                  <el-input class="w-350 ml-20" v-model="form.phone" placeholder="请输入"></el-input>
              </div>
              <div class="flex_l mt-20">
                  <div class="w-100">购买数量：</div>
                  <el-input class="w-350 ml-20" v-model="form.num" placeholder="请输入"></el-input>
              </div>
              <div class="flex_l mt-20">
                  <div class="w-100">收益：</div>
                  <el-input class="w-350 ml-20" v-model="form.shouYi" placeholder="请输入"></el-input>
              </div>
              <!-- <div class="flex_l mt-20">
                  <div class="w-60">角色：</div>
                  <el-select class="w-350 ml-20" v-model="form.platform" placeholder="请选择" @change="changeJs">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </div> -->
              <!-- <div class="flex_l mt-20">
                  <div class="w-100">身份证号：</div>
                  <el-input class="w-350 ml-20" v-model="form.mail" placeholder="请输入"></el-input>
              </div>
              <div class="flex_l mt-20">
                  <div class="w-100">身份证照片：</div>
                  <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview"
                      :on-remove="handleRemove" :limit="1">
                      <div>正面</div>
                  </el-upload>
                  <el-upload class="ml-20" :action="upUrl" list-type="picture-card" :on-success="handlePictureCardPreview"
                      :on-remove="handleRemove" :limit="1">
                      <div>反面</div>
                  </el-upload>
              </div> -->
              <!-- <div class="flex_l mt-20">
                  <div class="w-100">备注：</div>
                  <el-input class="w-350 ml-20" size="small" v-model="form.beiZhu" type="textarea"
                      placeholder="请输入"></el-input>
              </div> -->
          </div>



          <!-- <span slot="footer" class="dialog-footer">
              <el-button @click="show = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </span> -->
      </el-dialog>
  </div>
</template>

<script>
import { getcusUsercusOrder } from '@/api/hhr.js'
export default {
  name: "Xiaohao",
  data() {
      return {
          show: false,
          options: [{
              value: '1',
              label: '全部'
          }, {
              value: '2',
              label: '正常'
          }, {
              value: '3',
              label: '停用'
          }],
          value: '',
          options1: [
              {
                  value: '1',
                  label: '华南'
              }, {
                  value: '2',
                  label: '华北'
              }
          ],
          value1: '1',
          input: '',
          tableData: [],
          page: 1,
          total: 0,
          form: {
              address:'',
              beiZhu:'',
              mail:'',
              name:'',
              phone:''
          },
          dialogImageUrl: '',
          type: '',//1新增 2修改
          upUrl: ''
      }
  },
  mounted() {
      this.getUserList()
      this.upUrl = this.$baseUrl + '/apis/000/002-uploadFileForJson'
  },
  methods: {
      changeJs(e) {
          this.form.thirdId = e
          this.form.thirdName = this.options1.filter(item => item.value === e)[0].label;
      },
      addUser() {
          for (var i in this.form) {
              if (i != 'platform' && i != 'thirdId' && i != 'thirdName' && i != 'roles') {
                  this.form[i] = ''
              }
          }
          this.show = true
          this.type = 1
      },
      submit() {
          var apiFunction = this.type == 1 ? addUser : editUser
          apiFunction(this.form).then(res => {
              if (res.code == 0) {
                  this.show = false
                  this.getUserList()
                  this.$message({
                      message: this.type == 1 ? '添加成功' : '修改成功',
                      type: 'success'
                  });
              } else {
                  this.$message.error(res.msg || '失败');
              }
          })
      },
      getUserList() {
        getcusUsercusOrder({
              pageNum: this.page,
              pageSize: 10,
          }).then(res => {
              this.tableData = res.rows
              this.total = res.total
          })
      },
      handleEdit(e, type) {
          for (var i in this.form) {
              this.form[i] = type[i]
          }
          this.form.id = type.id
          this.show = true
          this.type = 2
      },
      handleDelete(e, type) {
          this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {

              removeUser({ ids: type.id }).then(res => {
                  this.$message({
                      type: 'success',
                      message: '删除成功!'
                  });
                  this.getUserList()
              })

          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      handleRemove(file, fileList) {
          console.log(file, fileList);
          this.form.headerPic = ''
      },
      handlePictureCardPreview(file) {
          this.form.headerPic = file.list[0].url
      }
  }
}
</script>